<template>
  <div class="spark-model">
    <m-list-box>
      <div slot="text">校验类型</div>
      <div slot="content">
        <el-select
          class="dis-b"
          size="small"
          v-model="mainJar"
          @change="mainJarChange"
          :disabled="isDetails">
          <el-option
            v-for="jarItem in mainJarList"
            :key="jarItem.id"
            :value="jarItem.id"
            :label="jarItem.description">
          </el-option>
        </el-select>
      </div>
    </m-list-box>
    <!-- <m-list-box>
      <div slot="text">主函数</div>
      <div slot="content">
        <el-input
            :readonly="true"
            :disabled="isDetails"
            type="input"
            size="small"
            v-model="mainClass"
            :placeholder="$t('Please enter main class')">
        </el-input>
      </div>
    </m-list-box>
    <m-list-box>
      <div slot="text">{{$t('App Name')}}</div>
      <div slot="content">
        <el-input
          :disabled="isDetails"
          type="input"
          size="small"
          v-model="appName"
          :placeholder="$t('Please enter app name(optional)')">
        </el-input>
      </div>
    </m-list-box> -->
    <m-list-box v-if="checkType">
      <div slot="text">校验规则</div>
      <div slot="content">
        <el-table :data="mainArgs">
          <el-table-column
            prop="name"
            label="字段名称">
            <template slot-scope="{row}">
              <el-input size="small" v-model="row.cloumnName"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            v-if="checkType > 1"
            prop="name"
            label="操作符">
            <template slot-scope="{row}">
              <el-select v-if="checkType === 2 || checkType === 3" class="dis-b" size="small" v-model="row.operate">
                <template v-for="item of operates" >
                  <el-option v-if="item.type === checkType"
                  :key="item.value"
                  :value="item.value"
                  :label="item.name"></el-option>
                </template>
              </el-select>
              <el-input v-else size="small" v-model="row.operate"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            v-if="checkType > 1"
            prop="value"
            label="值">
            <template slot-scope="{row}">
              <el-input size="small" v-model="row.value"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="50">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-circle-close" @click="() => {mainArgs.splice(scope.$index , 1)}"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="text" icon="el-icon-circle-plus-outline" @click="mainArgs.push({cloumnName: '' , value: '' , operate: ''})">添加</el-button>
      </div>
    </m-list-box>
  </div>
</template>
<script>
import * as _ from 'lodash'
import mListBox from './_source/listBox'
import disabledState from '@/mixins/disabledState'
export default {
  components: {
    mListBox
  },
  data(){
    return {
      programType: '',
      sparkVersion: 'SPARK2',
      // Driver cores
      driverCores: 1,
      // Driver memory
      driverMemory: '512M',
      // Executor number
      numExecutors: 2,
      // Executor memory
      executorMemory: '2G',
      // Executor cores
      executorCores: 2,
      // Deployment method
      deployMode: 'client',
      resourceList: [],
      mainJar: '',
      mainClass: '',
      appName: '',
      mainArgs: [],
      mainJarList: [],
      operates: [
        {name: '大于', value: 'gt' , type: 2},
        {name: '小于', value: 'lt', type: 2},
        {name: '大于等于', value: 'ge', type: 2},
        {name: '小于等于', value: 'le', type: 2},
        {name: '等于', value: 'eq', type: 2},
        {name: '不等于', value: 'neq', type: 2},
        {name: '包含', value: 'like', type: 3},
        {name: '不包含', value: 'notLike', type: 3},
        {name: '匹配正则', value: 'eqReg', type: 3},
        {name: '不匹配正则', value: 'notEqReg', type: 3}
      ],
      localParams: [],
      checkType: 0
    }
  },
  mixins: [disabledState],
  mounted(){
    this.$store.dispatch('dag/queryResourceListByFileType' , {
      file_type: 1
    }).then(
      res => {
        this.mainJarList = res;
        this.mainJarChange(true);
      }
    )
  },
  props: {
    backfillItem: Object
  },
  created(){
    let o = this.backfillItem;
    if (!_.isEmpty(o)) {
      this.mainJar = o.params.mainJar.id || '';
      this.mainClass = o.params.mainClass || '';
      this.deployMode = o.params.deployMode || 'client'
      this.driverCores = o.params.driverCores || 1
      this.driverMemory = o.params.driverMemory || '512M'
      this.numExecutors = o.params.numExecutors || 2
      this.executorMemory = o.params.executorMemory || '2G'
      this.executorCores = o.params.executorCores || 2
      this.appName = o.params.appName || ''
      console.log(this.mainArgs , o , o.params.mainArgs);
      this.mainArgs = o.params.mainArgs ? JSON.parse(o.params.mainArgs) : []
      this.programType = o.params.programType || ''
      this.sparkVersion = o.params.sparkVersion || 'SPARK2'
    }
  },
  methods: {
    _onLocalParams (a) {
      this.localParams = a
    },
    mainJarChange(initCheckType){
      this.mainJarList.forEach(
        item => {
          if(item.id === this.mainJar){
            this.mainClass = item.mainClass;
            this.programType = item.developLanguage;
            this.setCheckType(item , initCheckType);
            // this.appName = item.description;
          }
        }
      )
    },
    setCheckType(mainJar , initCheckType){
      let checkType = 0;
      if(mainJar.description === '空值校验'){
        checkType = 1;
      }else if(mainJar.description === '长度校验' || mainJar.description === '阈值校验'){
        checkType = 2;
      }else if(mainJar.description === '自定义校验'){
        checkType = 3;
      }else{
        checkType = 4;
      }
      if(checkType !== this.checkType){
        this.checkType = checkType;
        if(initCheckType !== true){
          this.mainArgs = [];
        }
      }
    },
    _verification(){

      if (!this.mainJar) {
        this.$message.warning('主程序不能为空');
        return false
      }
      // storage
      this.$emit('on-params', {
        mainClass: this.mainClass,
        mainJar: {
          id: this.mainJar
        },
        deployMode: this.deployMode,
        localParams: this.localParams,
        driverCores: this.driverCores,
        driverMemory: this.driverMemory,
        numExecutors: this.numExecutors,
        executorMemory: this.executorMemory,
        executorCores: this.executorCores,
        appName: this.appName,
        mainArgs: JSON.stringify(this.mainArgs),
        programType: this.programType,
        sparkVersion: this.sparkVersion,
        checkType: this.checkType
      })
      return true
    }
  }
}
</script>